import React, { Component } from "react";
import { connect } from "react-redux";
import { Toast, Modal } from "antd-mobile";
import MainLayout from "../../../../component/mainLayout/mainLayout";
import yhTools from "../../../../tools/yh";
import xhdConfig from "../../../../config/XHDConfig";
import { agreements_url } from "../../../../config/Config";
import { setXHDContractDetail } from "../../../../Redux/Action/contract/xhdLoanDetail";
import "./index.scss";
import { ThemeDefault, ThemeLife } from "../../../../tools/theme";

const hideName = name => name && "*".repeat(name.length - 1) + name.slice(-1);
const hideIdCard = card =>
	card && card.slice(0, 1) + "*".repeat(card.length - 2) + card.slice(-1);
@connect(
	() => ({}),
	dispatch => ({
		setXHDContractDetail: value => dispatch(setXHDContractDetail(value))
	})
)
class RecordDetail extends Component {
	constructor(props) {
		super(props);
		this.state = {
			info: {},
			contractList: [],
			visible: false
		};
	}
	componentDidMount() {
		this.getDetail(this.props.match.params.cino);
	}
	getDetail = cino => {
		const params = {
			url: xhdConfig.xhdGetLoanDetailInfoNew,
			params: {
				cino
			},
			_alertShow: false
		};
		yhTools.request(params).then(res => {
			if (res.code === "0") {
				this.setState({
					info: res.data,
					contractList: res.data.contractList || []
				});
			} else {
				Toast.info(res.message, 2);
			}
		});
	};
	clickContract = item => {
		this.setState(
			{
				visible: false
			},
			() => {
				this.props.setXHDContractDetail(item.contractContent);
				setTimeout(() => {
					this.props.history.push("/IndividualloancontractB");
				}, 1000);
			}
		);
	};
	toggleModal = visible => {
		this.setState({
			visible
		});
	};
	render() {
		const { info = {}, visible, contractList } = this.state;
		const _pageParams = {
			header: {
				title: "借据详情",
				goBackAction: () => {
					this.props.history.replace({ pathname: "/loanAndPayDetail/0" });
				}
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		return (
			<MainLayout pageParams={_pageParams}>
				<Modal
					popup
					title="合同及协议"
					animationType="slide-up"
					visible={visible}
					className="contract-modal"
				>
					<ul>
						{contractList.map(item => (
							<li onClick={() => this.clickContract(item)} key={Math.random()}>
								{item.contractName}
							</li>
						))}
					</ul>
					<p
						className="contract-modal-item"
						onClick={() => this.toggleModal(false)}
					>
						取消
					</p>
				</Modal>
				<div className="record-detail-container">
					<div className="common-area bg-white">
						<p className="common-area-title">借款人</p>
						<div className="common-area-content">
							<div className="line">
								<span>借款人</span>
								<span>{hideName(info.name)}</span>
							</div>
							<div className="line">
								<span>借款人身份证</span>
								<span>{hideIdCard(String(info.idNo))}</span>
							</div>
						</div>
					</div>
					<div
						className="common-area bg-white"
						style={{ marginBottom: "40px" }}
					>
						<p className="common-area-title">借款信息</p>
						<div className="common-area-content">
							<div className="line">
								<span>借款金额</span>
								<span>¥ {info.loanAmt}</span>
							</div>
							<div className="line">
								<span>借款期限</span>
								<span>{info.loanTerm}期</span>
							</div>
							<div className="line">
								<span>起止日期</span>
								<span>
									{info.startDate}⾄{info.endDate}
								</span>
							</div>
							<div className="line">
								<span>首次还款日</span>
								<span>{info.firstPaymentDate}</span>
							</div>
							<div className="line">
								<span>还款日</span>
								<span>每月{info.paymentDay}日</span>
							</div>
							{/* <div className="line">
                                <span>日利率</span>
                                <span>{info.interestRate}%</span>
                            </div> */}
							<div className="line">
								<span>收款账户</span>
								<span>
									{info.bankName}({info.account})
								</span>
							</div>
							<div className="line" onClick={() => this.toggleModal(true)}>
								<span>合同及协议</span>
								<ThemeDefault>
									<span className="font-link" style={{ color: "#40B15D" }}>
										查看
									</span>
								</ThemeDefault>
								<ThemeLife>
									<span
										className="font-link"
										style={{ color: "#F82633", textDecoration: "none" }}
									>
										查看
									</span>
								</ThemeLife>
							</div>
							<div className="line">
								<span>借款用途</span>
								<span>个人日常消费</span>
							</div>
							<div className="line">
								<span>还款方式</span>
								<span>等额本息</span>
							</div>
						</div>
					</div>
				</div>
			</MainLayout>
		);
	}
}
export default RecordDetail;
